<template>
    <div class="account">
        <div class="user-div color-999">
            工品ID: <span class="color-999">{{account.userId}}</span>
        </div>
        <div class="user-div color-999">
            注册时间: <span class="color-999">{{account.regTimeText}}</span>
        </div>
        <div class="img-div">
            <div class="img-div-left">
                <img :src="account.headImg">
            </div>
            <div class="img-div-right">
                <div>
                    <a @click="upLoadHeadImg" id="change-header-img">修改头像</a>
                    <span class="color-999">(60×60像素)</span>
                </div>
            </div>
        </div>
        <a class="write-option user-div space-between">
            <span>
                我的昵称: <span id="name">{{account.nickName}}</span> 
            </span>
            <van-icon class="icon" name="arrow" />
        </a>
        <a @click="clickShowEditWindow('signature')" class="write-option user-div space-between">
            <span>
                我的签名: <span id="signature" :class="account.signature === '' ? 'color-999' : ''">{{account.signature || '最多12个字'}}</span> 
            </span>
            <van-icon class="icon" name="arrow" />
        </a>
        <div @click="enterAbout" class="user-div about-official-account space-between">
            <span>关于工品业务</span>
            <van-icon class="icon" name="arrow" />
        </div>

        <div class="bottom-menu-div-assist"></div>
        <div class="bottom-menu-div">
            <button @click="toIndex" class="bottom-menu-btn" id="back-index">回到首页</button>
            <button @click="logOut" class="bottom-menu-btn" id="logout">退出账号</button>
        </div>
        <edit-window 
        ref="editWindow" 
        :placeholder="placeholder"
        @sureSave="sureSave"
        />
    </div>
</template>

<script>
import { returnTime } from '_commonFn/time'
import { enterAbout, toIndex, } from '_projectFn/page'
import { delLoginUserInfo, isLoginChose, } from '_projectFn/login'
import { saveSignature, } from '_network/request'

// 自定义组件
import EditWindow from "_components/project/ShowWindow/EditWindow"

import Vue from 'vue'
import { Icon } from 'vant'

Vue.use(Icon)

export default {
    name: 'Account',
    props: {
        accountData: {
            type: Object,
            default: {},
        },
    },
    data() {
        return {
            placeholder: '我的签名:最多12个字',
        }
    },
    methods: {
        // 点击显示编辑弹窗
        clickShowEditWindow() {
            console.log('clickShowEditWindow')
            this.$refs.editWindow.coverEditContent(this.account.signature) // 填充内容
            this.$refs.editWindow.showWindow() // 显示编辑弹窗
        },
        enterAbout() {
            enterAbout()
        },
        // 上传头像
        upLoadHeadImg() {
            this.$emit('imgLoad', 'user')
        },
        // 进入首页
        toIndex() {
            toIndex({})
        },
        // 退出账号
        logOut() {
            delLoginUserInfo()
            isLoginChose()
        },
        // 编辑弹窗，点击确定
        sureSave(str) {
            // console.log('sureSave str:', str)
            this.saveSignature(str)
        },
        // 执行保存签名
        saveSignature(str) {
            const that = this
            saveSignature({
                signature: str,
                callback(isSuucess) {
                    if (isSuucess) {
                        that.$emit('saveSignature', str)
                    }
                }
            })
        },
    },
    computed: {
        account() {
            const data = {
                regTimeText: '',
            }
            if (this.accountData.regTime) {
                data.regTimeText = returnTime({timestamp: this.accountData.regTime, showLastTime: false})
            }
            return Object.assign(data, this.accountData)
        }
    },
    components: {
        EditWindow,
    }
}
</script>

<style lang="scss" scoped>
.account {
    background: white;
    margin-top: 10px;
    
    .user-div {
        line-height: 42px;
        width: 100%;
        padding: 0 15px;
        border-bottom: 1px solid #efefef;
        font-size: 12px;
        display: block;
        color: #333333;

        span {
            margin-left: 2px;
        }

        .icon {
            font-size: 14px;
            font-weight: bold;
            color: #333333;
        }
    }

    .img-div {
        height: 82px;
        width: 100%;
        padding: 0 15px;
        border-bottom: 1px solid #efefef;
        display: -webkit-flex;
        display: flex;
        align-items: center;

        .img-div-left {
            img {
                height: 60px;
                width: 60px;
                margin-right: 10px;
                border-radius: 50%;
                flex-shrink: 0;
            }
        }
    }

    .space-between {
        display: flex;
        justify-content: space-between;
        cursor: pointer;
        align-items: center;
    }

    .bottom-menu-div-assist {
        width: 100%;
        height: 50px;
        background: #efefef;
    }

    .bottom-menu-div {
        width: 100%;
        height: 50px;
        display: -webkit-flex;
        display: flex;
        justify-content: center;
        position: fixed;
        bottom: 0;
        left: auto;
        border-top: 1px solid #eeeeee;

        .bottom-menu-btn {
            border: none;
            width: 50%;
            height: 100%;
            background: white;
        }

        #back-index {
            color: white;
            background: #007bc2;
            font-weight: bold;
        }
    }
}
</style>